import { defineStore } from 'pinia'
import {  ref, reactive } from 'vue'
import { themeStore } from './theme'


export const webConfigStore = defineStore('config', () => {

  // 左侧菜单缩进
  const collapseStatus = ref(false)
  const toggleCollapse = ()=> {
    collapseStatus.value = !collapseStatus.value
  }
  // 左侧菜单顶部title
  const asideTitle = ref(false)
  const defaultConfig = {
    // 深色侧边栏
    style: {
      sideMenu: {
        styleName: 'sideMenu',
        mode: 'defaultTheme',
      },
    },
    // 水印
    waterMark: false,
    waterMarkStyle: {
      color: 'rgba(0, 0, 0, 0)',
    },
    waterMarkGap: [200, 200],
    waterMarkContent: 'Element plus',
    // 默认组件大小
    componentSizes: 'default',
    // 布局模式
    webModalType: 'model2',
  }
  const configuration = reactive({ ...defaultConfig })

  const toggleWaterMark = () => {
    if (configuration.waterMark) {
      configuration.waterMarkStyle.color = 'rgba(0, 0, 0, 0.15)'
    } else {
      configuration.waterMarkStyle.color = 'rgba(0, 0, 0, 0)'
    }
  }

  // 合并配置文件
  const mergeConfiguration = (config: any) => {
    Object.keys(config).forEach((key) => {
      configuration[key] = config[key]
    })
    const style = config.style
    if (style) {
      loadStyleConfig(style)
    }
  }

  const loadStyleConfig = (styleConfig: any) => {
    const theme = themeStore()
    Object.keys(styleConfig).forEach((key) => {
      theme.setTheme(styleConfig[key].styleName, styleConfig[key].mode)
    })
  }

  const $reset = () => {
    Object.assign(configuration, {...defaultConfig })
  }

  return { collapseStatus, toggleCollapse, asideTitle, toggleWaterMark, configuration, mergeConfiguration, loadStyleConfig, $reset }
})
